<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="box">
        123
        <p>段落</p>
        <!-- 我是一段注释 -->
    </div>

    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>

    <script>
        let box = document.querySelector('#box')
        let ul = document.querySelector('ul')

        // 前面我们说到，其实单独的换行也是一个文本节点，所以box这个div一共有5个子节点，但是很多时候我们是不需要获取到这些看上去没啥意义的节点的，所以这也正是childNodes和children的区别。前者会获取到所有的子节点，后者只会获取到子元素节点。同理我们也有parentElement和parentNode(注意没有s)
        console.log(box.childNodes);
        console.log(box.children)

        console.log(box.parentElement);
        console.log(box.parentNode);
        /*
            element.firstchild可以获取到目标元素的第一个子节点
            element.firstElementChild可以获取到目标元素的第一个子元素节点

            element.lastChild可以获取到目标元素的最后一个子节点
            element.lastElementChild可以获取到目标元素的最后一个子元素节点

            注意，区别依然是节点和元素节点。
        */ 
       console.log(ul.firstChild);
       console.log(ul.firstElementChild);

       console.log(ul.lastChild);
       console.log(ul.lastElementChild);

       /*
            element.previousSibling可以获取到目标元素的前一个兄弟节点
            element.previousElementSibling可以获取到目标元素的前一个兄弟元素节点
            element.nextSibling可以获取到目标元素的后一个兄弟节点
            element.nextElementSibling可以获取到目标元素的后一个兄弟元素节点
       */
      console.log(ul.firstElementChild.nextElementSibling);
      console.log(ul.firstElementChild.nextSibling);

      console.log(ul.lastElementChild.previousSibling);
      console.log(ul.lastElementChild.previousElementSibling);

    </script>
</body>
</html>